<!DOCTYPE html>
<html>
<head>
    <title>The latest and greatest music player</title>
    <!-- TODO: a link to a .css file containing default styles for the music player -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <!-- TODO: jQuery (CDN) reference -->
    <script type="text/javascript" src="modernizrAudio.js"></script>
    <script type="text/javascript" src="musicPlayer.js"></script>
    <!-- TODO: your MusicPlayer jQuery plugin reference!!!! -->
</head>
<body>
    <p>The latest and greatest music player</p>
    <div id="player1">
      <ul>
        <li>http://dl.dropbox.com/u/62096995/Fresh%20Prince%20of%20Bel%20Air.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/HEYYEYAAEYAAAEYAEYAA.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/Sweet%20Brown%20-%20Ain_t%20Nobody%20Got%20Time%20For%20That.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/giveyouup.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/trolololo.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/Nyan%20Cat.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/giveyouup.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/trolololo.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/Nyan%20Cat.mp3</li>
      </ul>
    </div> <!-- this element will host the player!! -->

     <div id="player2">
      <ul>
        <li>http://dl.dropbox.com/u/62096995/trolololo.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/Nyan%20Cat.mp3</li>
        <li>http://dl.dropbox.com/u/62096995/giveyouup.mp3</li>
      </ul>
    </div> 

    

    <script type="text/javascript" >

         $(document).ready( function( ) {

              $("#player1").musicPlayer({autoPlay:false,defaultVolume:70,showPlaylist:false});

              $("#player2").musicPlayer({autoPlay:false,defaultVolume:10,showPlaylist:true,hidePlaylistOnStart:true,simpleControls:true});
              // Optionally, the function should accept an object containing optional values, 
              // such as a boolean "autostart" value, i.e. if the player should start playing
              // immediately etc.
         });

    </script>
</body>
</html> 